<template>
	<view class="content">
		<view>
			<uni-search-bar radius="100" @confirm="search" @input="input" @cancel="cancel" />
		</view>
		
		<view class="u-table">
			<table class="s" rules="all">
				<tr>
					<td colspan="4" class="d">快速匹配医生</td>
				</tr>
				<tr style="line-height: 50px;">
					<td>流感</td>
					<td>用药咨询</td>
					<td>疫苗咨询</td>
					<td>宝宝健康</td>
				</tr>
				<tr style="line-height: 50px;">
					<td>护肤</td>
					<td>美容整形</td>
					<td>肥胖</td>
					<td>月经不调</td>
				</tr>
				<tr style="line-height: 50px;">
					<td>支气管炎</td>
					<td>鼻炎</td>
					<td>焦虑</td>
					<td>失眠</td>
				</tr>
			</table>
		</view>
		
		<view class="u-list-item">
			<uni-list>
				<uni-list-item-menu title="皮肤性病科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."   :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#00baad',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="儿科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...." :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="妇产科&生殖中心" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...." :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'dianzan'}" showArrow="true"/>
				<uni-list-item-menu title="泌尿外科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...." :clickable="true" :show-extra-icon="true" :extraIcon="{color: 'blue',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="内分泌科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...." :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="心血管内科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="骨科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="神经内科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="消化内科科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...." :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="肾脏内科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="美容整形科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="药剂科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="内科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="眼科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="精神心理科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...." :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="肿瘤科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>
				<uni-list-item-menu title="耳鼻咽喉头颈外科" note="小儿发烧,咳嗽,哮喘,流鼻涕,拉肚...."  :clickable="true" :show-extra-icon="true" :extraIcon="{color: '#848B8C',size: '22',type: 'huo'}" showArrow="true"/>			
				</uni-list>
		</view>
	</view>
</template>

<script>

import utable from "@/components/u-table/u-table.vue";
import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
import customIcons from "@/components/custom-icons/custom-icons.vue";
import uniListItemMenu from '@/components/uni-list-item/uni-list-item-menu.vue'

export default {
	components: {
		liuyunoTabs,
		customIcons,
		utable,
		uniListItemMenu
	},
	data() {
		return {
			searchVal: '',
			
		}
	},
	methods: {
		search(res) {
			uni.showToast({
				title: '搜索：' + res.value,
				icon: 'none'
			})
		},
		input(res) {
			this.searchVal = res.value
		},
		cancel(res) {
			uni.showToast({
				title: '点击取消，输入值为：' + res.value,
				icon: 'none'
			})
		}
	}
};
</script>

<style>
	*{
		padding: 0;
		margin: 0;
	}
.s{
	width: 375px;
	background-color:#ffffff;
	padding-top: 5px;
}
.d{
	font-size: 20px;
	line-height: 45px;
	padding-right:230px;
}
.s td:nth-child(1){
	text-align: center;
}
.s td:nth-child(2){
	text-align: center;
}
.s td:nth-child(3){
	text-align: center;
}
.s td:nth-child(4){
	text-align: center;
}
.u-table{
	padding:5px 0;
	margin:5px 0 10px 0;
}
</style>
